<template xmlns:v-slot="http://www.springframework.org/schema/rabbit">
    <v-content class="top66px">
        <section>
            <v-parallax src="@/assets/files/gin02.jpg" :height="clientHeight">
                <v-layout
                        column
                        align-center
                        justify-center
                        class="white--text"
                >
                    <v-avatar
                            :tile="tile"
                            :size="avatarSize"
                    >
                        <img
                                v-if="img"
                                :src="avatar"
                                alt="avatar"
                        >
                        <span v-else>VJ</span>
                    </v-avatar>
                    <h1 class="white--text mb-2 display-1 text-center">{{username}}</h1>
                    <div class="subheading mb-4 text-center">{{signature}}</div>
                    <v-btn
                            class="mt-12"
                            color="blue lighten-2"
                            :disabled="allowIn"
                            dark
                            large
                            @click="openLoginWindow"
                    >
                        入教
                    </v-btn>
                </v-layout>
            </v-parallax>
        </section>

        <section>
            <v-layout
                    column
                    wrap
                    align-left
            >
                <v-flex xs12 sm4 class="my-4">
                    <div class="text-center">
                        <h2 class="headline">罗曼·罗兰：</h2>
                        <span class="subheading">
                世上只有一种英雄主义，就是认清生活的本质后，依旧选择热爱生活。
              </span>
                    </div>
                </v-flex>
                <v-flex xs12>
                    <v-layout row wrap align-left>
                        <v-flex xs12 md3>
                            <v-hover
                                    v-slot:default="{ hover }"
                                    :open-delay="openDelay"
                                    :close-delay="closeDelay"
                                    :disabled="disabled"
                                    :value="value"
                            >
                                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                                    <v-card-text class="text-center">
                                        <v-icon x-large class="blue--text text--lighten-2">mdi-palette
                                        </v-icon>
                                    </v-card-text>
                                    <v-card-title primary-title class="layout justify-center">
                                        <div class="headline text-center">Web</div>
                                    </v-card-title>
                                    <v-card-text class="text-center">
                                        <v-chip x-small small color="#0C74AA" draggable>Html5</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Vue</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>NodeJs</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Webpack</v-chip>
                                        <v-chip x-small color="#DAD7E5" draggable>BootStrap</v-chip>
                                        <v-chip x-small color="#AFD0D9" draggable>JQuery</v-chip>
                                        <v-chip x-small color="#B09D81" draggable>axios</v-chip>
                                        <v-chip x-small color="#D8C1A3" draggable>layui</v-chip>
                                        <v-chip x-small color="#EDF0E9" draggable>H+</v-chip>
                                        <v-chip x-small color="#65656A" draggable>Echarts3</v-chip>
                                        <v-chip x-small color="#27A4E6" draggable>muse-ui</v-chip>
                                        <v-chip x-small color="#DADDFD" draggable>Element</v-chip>
                                        <v-chip x-small color="#61AFA5" draggable>Vuetify</v-chip>
                                        <br>
                                        <span class="text--primary">
                                                            <span>Fighting for more beautiful projects</span><br>
                                                        </span>
                                        前端项目，体验至上
                                    </v-card-text>
                                </v-card>
                            </v-hover>
                        </v-flex>
                        <v-flex xs12 md3>
                            <v-hover
                                    v-slot:default="{ hover }"
                                    :open-delay="openDelay"
                                    :close-delay="closeDelay"
                                    :disabled="disabled"
                                    :value="value"
                            >
                                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                                    <v-card-text class="text-center">
                                        <v-icon x-large class="blue--text text--lighten-2">mdi-flash
                                        </v-icon>
                                    </v-card-text>
                                    <v-card-title primary-title class="layout justify-center">
                                        <div class="headline">Server</div>
                                    </v-card-title>
                                    <v-card-text class="text-center">
                                        <v-chip x-small color="#DAD7E5" draggable>Spring-Cloud</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Java</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Mysql</v-chip>
                                        <v-chip x-small color="#4989F4" draggable>Oracle</v-chip>
                                        <v-chip x-small color="#FFE793" draggable>Websocket</v-chip>
                                        <v-chip x-small color="#DAD7E5" draggable>Spring-Boot</v-chip>
                                        <v-chip x-small color="#61AFA5" draggable>SpringMVC</v-chip>
                                        <v-chip x-small color="#AFD0D9" draggable>Redis</v-chip>
                                        <v-chip x-small color="#BBB9B5" draggable>Druid</v-chip>
                                        <v-chip x-small color="#D8C1A3" draggable>Mybatis</v-chip>
                                        <v-chip x-small color="#EAC542" draggable>Zookeeper</v-chip>
                                        <v-chip x-small color="#27A4E6" draggable>RabbitMQ</v-chip>
                                        <v-chip x-small color="#B09D81" draggable>Netty-Websocket</v-chip>
                                        <v-chip x-small color="#D8C1A3" draggable>Kafka</v-chip>
                                        <v-chip x-small color="#65656A" draggable>Maxwell</v-chip>
                                        <v-chip x-small color="#DADDFD" draggable>Oauth2</v-chip>
                                        <v-chip x-small color="#CCDADA" draggable>Shiro</v-chip>
                                        <v-chip x-small color="#B09D81" draggable>Httpd</v-chip>
                                        <br>
                                        <span class="text--primary">
                                                            <span>Fighting for more efficient  projects</span><br>
                                                        </span>
                                        向着高效率出发
                                    </v-card-text>
                                </v-card>
                            </v-hover>
                        </v-flex>
                        <v-flex xs12 md3>
                            <v-hover
                                    v-slot:default="{ hover }"
                                    :open-delay="openDelay"
                                    :close-delay="closeDelay"
                                    :disabled="disabled"
                                    :value="value"
                            >
                                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                                    <v-card-text class="text-center">
                                        <v-icon x-large class="blue--text text--lighten-2">mdi-wrench
                                        </v-icon>
                                    </v-card-text>
                                    <v-card-title primary-title class="layout justify-center">
                                        <div class="headline text-center">Ops</div>
                                    </v-card-title>
                                    <v-card-text class="text-center">
                                        <v-chip x-small color="#DAD7E5" draggable>CentOs</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Ubuntu</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Nginx</v-chip>
                                        <v-chip x-small color="#D6E3EC" draggable>Ngrok</v-chip>
                                        <br>
                                        <span class="text--primary">
                                                            <span>Fighting for more stable projects</span><br>
                                                        </span>
                                        合理的资源分配相当关键~
                                    </v-card-text>
                                </v-card>
                            </v-hover>
                        </v-flex>
                        <v-flex xs12 md3>
                            <v-hover
                                    v-slot:default="{ hover }"
                                    :open-delay="openDelay"
                                    :close-delay="closeDelay"
                                    :disabled="disabled"
                                    :value="value"
                            >
                                <v-card flat class="transparent" :elevation="hover ? 12 : 0" height="300">
                                    <v-card-text class="text-center">
                                        <v-icon x-large class="blue--text text--lighten-2">
                                            mdi-xbox-controller
                                        </v-icon>
                                    </v-card-text>
                                    <v-card-title primary-title class="layout justify-center">
                                        <div class="headline text-center">Taste</div>
                                    </v-card-title>
                                    <v-card-text class="text-center">
                                        唱、跳、Rap、篮球...别紧张，开个玩笑~<br>
                                        <v-chip x-small color="#DAD7E5" draggable>吉他</v-chip>
                                        <v-chip x-small color="#A35B3D" draggable>乒乓球</v-chip>
                                        <v-chip x-small color="#B27FB2" draggable>银魂</v-chip>
                                        <v-chip x-small color="#B27FB2" draggable>火影忍者</v-chip>
                                        <v-chip x-small color="#81A6BE" draggable>LOL</v-chip>
                                        <v-chip x-small color="#FFD4BF" draggable>下棋</v-chip>
                                        <v-chip x-small color="#D9E6F7" draggable>开游戏直播</v-chip>
                                        <v-chip x-small color="#B848FF" draggable>健身</v-chip>
                                        <v-chip x-small color="#DE9140" draggable>音乐</v-chip>

                                        <br>
                                        <span class="text--primary">
                                                            <span>
                                                                学习必须与实干相结合
                                                            </span><br>
                                                        </span>
                                        有共同爱好的兄弟，非常愿意跟你交朋友哦。加入我的圈子，干就完事了~
                                    </v-card-text>

                                </v-card>
                            </v-hover>
                        </v-flex>
                    </v-layout>
                </v-flex>
            </v-layout>
        </section>

        <section>
            <v-parallax src="@/assets/files/wanshiwu.jpg" class="mt-5">
                <v-layout column align-center justify-center>
                    <div class="headline text-center">
                        匆匆过客，留名于此？
                    </div>
                    <v-btn
                            class="mt-12"
                            color="brown darken-3"
                            dark
                            large
                            elevation="12"
                            href="/pre-made-themes"
                    >
                        拍一块砖
                    </v-btn>
                </v-layout>
            </v-parallax>
        </section>

        <section>
            <v-container align-content-space-between fluid>
                <v-layout row wrap width="100%">
                    <v-flex xs12 sm6>
                        <v-card flat class="transparent">
                            <v-card-title primary-title class="layout justify-center">
                                <div class="headline">一些不重要的事：</div>
                            </v-card-title>
                            <v-card-text>
                                人不是什么时候都能活得光明正大，
                                本想抬头挺胸前进，却不知何时就会沾一生泥巴。
                                不过，即使那样也能坚持走下去的话，总有一天，泥巴也会干燥掉落的。
                            </v-card-text>
                        </v-card>
                    </v-flex>
                    <v-flex xs12 sm6>
                        <v-card flat class="transparent">
                            <v-card-title primary-title class="layout justify-center">
                                <div class="headline">联系我</div>
                            </v-card-title>
                            <v-card-text>
                                韬光养晦,文心雕龙
                            </v-card-text>
                            <v-list class="transparent">
                                <v-list-item>
                                    <v-list-item-action>
                                        <v-icon class="blue--text text--lighten-2">mdi-account</v-icon>
                                    </v-list-item-action>
                                    <v-list-item-content>
                                        <v-list-item-title>陈泰来</v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                                <v-list-item>
                                    <v-list-item-action>
                                        <v-icon class="blue--text text--lighten-2">mdi-phone</v-icon>
                                    </v-list-item-action>
                                    <v-list-item-content>
                                        <v-list-item-title>181-2058-3050</v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                                <v-list-item>
                                    <v-list-item-action>
                                        <v-icon class="blue--text text--lighten-2">mdi-map-marker
                                        </v-icon>
                                    </v-list-item-action>
                                    <v-list-item-content>
                                        <v-list-item-title>中国 ， 武汉市</v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                                <v-list-item>
                                    <v-list-item-action>
                                        <v-icon class="blue--text text--lighten-2">mdi-email</v-icon>
                                    </v-list-item-action>
                                    <v-list-item-content>
                                        <v-list-item-title>540693258@qq.com</v-list-item-title>
                                    </v-list-item-content>
                                </v-list-item>
                            </v-list>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </section>


        <!--隐藏的用户登录对话框-->
        <v-dialog v-model="$store.state.sys.showLogin" max-height="500" max-width="800">
            <login ref="login" @closeLoginWindow="closeLoginWindow" @initUser="initUser"/>
        </v-dialog>
    </v-content>
</template>
<script>
    import '@/assets/css/business/parallax/parallax.scss';
    import Login from '@/components/Login.vue'

    export default {
        name: "parallax",
        components: {
            login: Login
        },
        data: () => ({
            //头像
            // color: 'grey lighten-4',
            img: true,
            tile: false,
            avatarSize: "210px",
            //Hover
            disabled: false,
            openDelay: '0',
            closeDelay: '0',
            value: false,
            clientHeight: "",
            username: "",//用户名
            avatar: "",//头像
            signature: "",//签名
            allowIn: false,//允许点击

        }),
        methods: {
            /**
             * 动态监控屏幕宽高比
             */
            initClientWidth() {
                // 获取浏览器可视区域高度
                this.clientHeight = `${document.documentElement.clientHeight}`;
                let _that = this;
                window.onresize = function temp() {
                    _that.clientHeight = `${document.documentElement.clientHeight}`;
                };
            },
            /**
             * 打开 login 弹窗
             */
            openLoginWindow() {
                this.username = "";
                this.password = "";
                //打开登录框
                this.$store.commit('showLogin');
                ``
            },
            initUser() {
                let username = this.$store.state.user.username;
                let avatar = this.$store.state.user.avatar;
                let signature = this.$store.state.user.signature;
                this.username = username === "" ? "路人小虾米" : username;
                this.avatar = avatar === "" ? "http://111.231.239.202:8018/data/img/unknownAvatar.png" : avatar;
                this.signature = signature === "" ? "同是天涯沦落人，相逢何必曾相识?" : signature;
                if (username) {
                    this.allowIn = true;
                }
            },
            closeLoginWindow() {
                //关闭登录框
                this.$store.commit('hideLogin');
            }
        },
        mounted() {
            this.initClientWidth();
        },
        created() {
            this.initUser();
        }
    }
</script>

<style scoped>

</style>